<template>
  <div 
    class="chat-input-container"
    :class="{ 'drag-over': isDragOver }"
    @dragover.prevent="handleDragOver"
    @dragleave.prevent="handleDragLeave"
    @drop.prevent="handleDrop"
  >
    <textarea
      v-model="message"
      class="chat-input"
      :style="{ height: inputHeight + 'px' }"
      :placeholder="isDragOver ? '松开鼠标上传文件...' : '输入消息...'"
      @keyup.enter.exact="sendMessage"
      @keyup.enter.shift="addNewline"
      :disabled="loading"
    ></textarea>
    
    <input 
      type="file" 
      accept=".txt,.md,.doc,.docx" 
      @change="onFileChange" 
      :disabled="loading"
      style="display: none;"
      ref="fileInput"
    />
    <div class="input-actions">
      <div class="input-actions-left">
        <button 
          class="file-upload-btn" 
          @click="triggerFileSelect" 
          :disabled="loading"
          :title="selectedFileName ? '重新选择文件' : '上传文件'"
        >
          📎 {{ selectedFileName ? '已选择' : '上传文件' }}
        </button>
        
        <div v-if="selectedFileName" class="selected-file-info">
          <span class="file-name">{{ selectedFileName }}</span>
          <button 
            class="remove-file-btn" 
            @click="clearFile" 
            :disabled="loading"
            title="移除文件"
          >
            ✕
          </button>
        </div>
      </div>
      
      <div class="input-actions-right">
        <button 
            class="deep-mode-button" 
            :class="{ 'active': deep }"
            @click="deep = !deep"
            :disabled="loading"
            :title="deep ? '当前为深度思考模式' : '切换到深度思考模式'"
        >
          {{ deep ? '✅ 深度思考' : '深度思考' }}
        </button>
        
        <button
          v-if="loading"
          class="abort-button"
          @click="abortGeneration"
          :disabled="!loading"
        >
          中止生成
        </button>
        <button
          v-else
          class="secondary"
          @click="clearInput"
          :disabled="!message.trim() || loading"
        >
          清除
        </button>
        <button 
          class="send-button" 
          :class="{ 'loading-state': loading, 'disabled-state': (!message.trim() && !file) }"
          @click="sendMessage"
          :disabled="loading"
          :title="loading ? '正在生成回答，请稍候...' : (!message.trim() && !file) ? '请输入消息或选择文件' : '发送消息'"
        >
          <span v-if="loading" class="loading"></span>
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  inputHeight: {
    type: Number,
    default: 60
  }
});

const emits = defineEmits(['send', 'abort']);

const message = ref('');
const file = ref(null);
const selectedFileName = ref('');
const deep = ref(false); // 深度思考状态
const isDragOver = ref(false);


const sendMessage = () => {
  const content = message.value.trim();
  if (content || file.value) {
    // 传给父组件：如果有文件则包含文件
    const payload = { content, file: file.value, mode: deep.value ? 'deep' : 'shallow' };
    emits('send', payload);
    message.value = '';
    file.value = null;
    selectedFileName.value = '';
  }
};

const abortGeneration = () => {
  emits('abort');
};

const clearInput = () => {
  message.value = '';
};

const addNewline = () => {
  message.value += '\n';
};

const onFileChange = (e) => {
  const f = e.target.files && e.target.files[0];
  if (f) {
    processFile(f);
  }
};

const clearFile = () => {
  file.value = null;
  selectedFileName.value = '';
};

const triggerFileSelect = () => {
  const fileInput = document.querySelector('input[type="file"]');
  if (fileInput) {
    fileInput.click();
  }
};

// 拖拽处理函数
const handleDragOver = (e) => {
  e.preventDefault();
  isDragOver.value = true;
};

const handleDragLeave = (e) => {
  e.preventDefault();
  isDragOver.value = false;
};

const handleDrop = (e) => {
  e.preventDefault();
  isDragOver.value = false;
  
  const files = e.dataTransfer.files;
  if (files && files.length > 0) {
    const droppedFile = files[0];
    processFile(droppedFile);
  }
};

// 处理文件选择
const processFile = (selectedFile) => {
  // 检查文件类型
  const allowedTypes = ['.txt', '.md', '.doc', '.docx'];
  const fileExt = '.' + selectedFile.name.split('.').pop().toLowerCase();
  
  if (!allowedTypes.includes(fileExt)) {
    alert('不支持的文件类型，请选择 .txt, .md, .doc, .docx 格式的文件');
    return;
  }
  
  // 检查文件大小（限制为10MB）
  const maxSize = 10 * 1024 * 1024; // 10MB
  if (selectedFile.size > maxSize) {
    alert('文件大小不能超过10MB');
    return;
  }
  
  file.value = selectedFile;
  selectedFileName.value = selectedFile.name;
};

// 格式化文件大小（保留备用）
// const formatFileSize = (bytes) => {
//   if (!bytes) return '';
  
//   const sizes = ['B', 'KB', 'MB', 'GB'];
//   const i = Math.floor(Math.log(bytes) / Math.log(1024));
//   return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
// };
</script>

<style scoped>
/* 保持原有的所有样式... */
.chat-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  position: relative;
  transition: all 0.3s ease;
}

.chat-input-container.drag-over {
  background-color: #f0f9ff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.chat-input-container.drag-over::before {
  content: '拖拽文件到此处上传';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.chat-input {
  resize: none;
  width: 100%;
  min-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: border-color 0.2s ease, height 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 文件上传按钮样式 */
.file-upload-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transform: scale(1);
}

.file-upload-btn:hover:not(:disabled) {
  background-color: #1e40af; /* 更深的蓝色 */
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.file-upload-btn:active:not(:disabled) {
  background-color: #1e3a8a; /* 更深的蓝色 */
  transform: scale(1.02) translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.file-upload-btn:disabled {
  background-color: var(--text-secondary);
  cursor: not-allowed;
  transform: scale(1);
  box-shadow: none;
}

/* 已选择文件信息样式 */
.selected-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ecfdf5;
  border: 1px solid #10b981;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.selected-file-info .file-name {
  color: #065f46;
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-file-info .remove-file-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.125rem;
  border-radius: 3px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.selected-file-info .remove-file-btn:hover:not(:disabled) {
  background-color: #fee2e2;
  transform: scale(1.1);
}

.selected-file-info .remove-file-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.input-actions-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-actions-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 移除原有的 mode-toggle 样式，因为它不再是 checkbox */
/*
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
*/

/* 新增：深度思考按钮样式 */
.deep-mode-button {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  height: 36px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.deep-mode-button.active {
  background-color: #d1fae5; /* 激活时的背景色 */
  color: #065f46; /* 激活时的文字颜色 */
  border-color: #10b981; /* 激活时的边框颜色 */
  font-weight: 500;
}

.deep-mode-button:hover:not(:disabled) {
  border-color: var(--primary-color);
  background-color: var(--bg-hover);
}

.deep-mode-button.active:hover:not(:disabled) {
  background-color: #a7f3d0; /* 激活状态下 Hover 的背景色 */
}

.deep-mode-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 发送按钮样式 */
.send-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  min-width: 80px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.secondary {
  min-width: 80px;
  height: 36px;
  background-color: var(--bg-secondary);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-button:hover:not(:disabled) {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.send-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2);
}

/* 禁用状态样式（没有消息时） */
.send-button.disabled-state {
  background-color: var(--text-secondary);
  color: #070707;
  cursor: not-allowed;
  transform: scale(1);
  box-shadow: none;
  opacity: 0.6;
}

.send-button.disabled-state:hover {
  background-color: var(--text-secondary);
  color: #374151;
  transform: scale(1);
  box-shadow: none;
  opacity: 0.6;
}

/* 加载状态样式（真正禁用时） */
.send-button.loading-state {
  background-color: #94a3b8;
  color: white;
  cursor: not-allowed;
  opacity: 0.8;
}

.send-button.loading-state:hover {
  background-color: #94a3b8;
  color: white;
  transform: none;
  box-shadow: none;
}

.send-button:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

.send-button:disabled:hover {
  background-color: #94a3b8;
  transform: none;
  box-shadow: none;
}

/* 中止按钮样式 */
.abort-button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  min-width: 80px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.abort-button:hover {
  background-color: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.abort-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2);
}

.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.5rem;
  vertical-align: middle;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>